import { SvgIcon } from '@/components/icon';
import { t } from '@/locales/i18n';

export default function VariableLabel({
  variableLabel,
  nodeAvatar,
}: {
  variableLabel: string;
  nodeAvatar: string;
}) {
  // avoid including '.' in the variable name.
  const [parentLabel, ...childLabels] = variableLabel.split('.');
  const childLabel = childLabels.join('.');

  return (
    <div
      className={`inline-flex items-center gap-2 rounded-md text-xs ${
        parentLabel !== 'undefined' ? 'bg-white' : 'bg-error'
      } ${parentLabel !== 'undefined' ? 'text-gray-800' : 'text-white'}`}
    >
      {parentLabel !== 'undefined' ? (
        <div className="flex items-center gap-1">
          <SvgIcon icon={nodeAvatar.replace('.svg', '') as any} />
          {parentLabel}
          <span className="text-text-2">/</span>
          {childLabel}
        </div>
      ) : (
        <div>{t('invalid_variable')}</div>
      )}
    </div>
  );
}
